<template>
	<view class="conntent">
		<view>
					<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
					 swiperWidth="750" name="title"></u-tabs-swiper>
				</view>
				<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
						<scroll-view scroll-y style="height: 100vh;width: 100%;" @scrolltolower="onreachBottom">
							<view class="content-list"> 
							<view class="content_text">
								<rich-text :nodes="item.content"></rich-text>
								<!-- <text v-html="item.content"></text>
								<text >{{item.content}}</text> -->
								<!-- {{item.content}} -->
							</view>
							<!-- <mp-html :content="item.content"/> -->
							</view>
							
							
						</scroll-view>
					</swiper-item>
				</swiper>
		
	</view>
</template>
<script>
import { BASE_URL_IMAHE } from "../../../../utils/https";
	import { getServiceProtocol } from "@/api/service";
	export default {
	  name: "infoindex",
	  data() {
		  return {
			form:{},
			list: [],
							// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
							current: 0, // tabs组件的current值，表示当前活动的tab选项
							swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			tabs:[
				
			]
			
			
		  }
	  },
	  onLoad(options) {
		  // console.log(JSON.parse(options.item))
		 this.getinfon()
			
		
	  },
	  onReady() {
		  
	  		
	  	},
			
		methods:{
		  async	getinfon(){
				var res=await getServiceProtocol()
				console.log(res)
				if(res.result==0){
					this.list=res.serviceProtocol
				}
			},
			// tabs通知swiper切换
						tabsChange(index) {
							this.swiperCurrent = index;
						},
						// swiper-item左右移动，通知tabs的滑块跟随移动
						transition(e) {
							let dx = e.detail.dx;
							this.$refs.uTabs.setDx(dx);
						},
						// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
						// swiper滑动结束，分别设置tabs和swiper的状态
						animationfinish(e) {
							let current = e.detail.current;
							this.$refs.uTabs.setFinishCurrent(current);
							this.swiperCurrent = current;
							this.current = current;
						},
						// scroll-view到底部加载更多
						onreachBottom() {
							
						}
		}
	}
	  
</script>

<style scoped>
	page {
	  min-height: 100vh;
	  background-color: #f2f2f2;
	  overflow: auto;
	}
	.content-list{
		width: 100%;
		height: 100vh;
		line-height: 50rpx;
		box-sizing: border-box;
		padding: 20rpx 10rpx;
		white-space: wrap;
	}
	.conntent{
		height: 100vh;
	}
	.swiper-box::v-deep {
	  height: 100%;
	  .swiper-item {
	    height: 100vh;
	    padding-bottom: 16rpx;
		}
	}
	.content_text{
		white-space:pre-wrap;
		text{
			white-space:pre-wrap;
		}
	}

</style>